<template>
     <div class="box">
        <div class="aside">
            <ul>
                <li v-for="item, index in arr" :key="index" :class="{ 'active': check == index }" @click="toggleContent(index)">
                    {{ item.title }}
                </li>
            </ul>
        </div>
        <div class="content">
            <keep-alive>
                <component :is="currentTabComponent"></component>
            </keep-alive>
        </div>
    </div>
</template>

<script>
import BoughtClass from './BoughtClass.vue';
import MyBill from './MyBill.vue';
import MyDownload from './MyDownload.vue';
export default {
    props: {

    },
    data() {
        return {
            arr: [{ title: '已购课程',component:'BoughtClass' },
             { title: '我的下载',component:'MyDownload' },
              { title: '我的账单',component:'MyBill' }],
            check: 0,
            currentTabComponent:'BoughtClass'
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    methods: {
        toggleContent(idx){
            this.check = idx;
            this.currentTabComponent = this.arr[idx].component;
        }
    },
    components: {
        MyDownload,BoughtClass,MyBill
    },
};
</script>

<style scoped lang="less">.box {
    width: 1200px;
    height: 482px;
    background-color: #fff;
    display: flex;

    .aside {
        width: 220px;
        border-right: 1px solid #efefef;

        ul {
            margin-top: 10px;
            height: 482px;

            li {
                display: flex;
                align-items: center;
                padding-left: 25px;
                height: 50px;
                font-size: 16px;
                color: #000;
            }

            .active {
                background-color: #5b6066;
                color: #fff;
            }
        }
    }
    .content{
        width: 980px;
        height: 482px;
        padding: 20px
    }
}
</style>
